<template>
    <div class="five">
        <h6>五天预报</h6>
        <div class="yubao">
             <div v-for="item in tempList" class="items">
            <div>{{ item.date.slice(5,10) }}</div>
          <div><van-tag type="success">{{ item.quality }}</van-tag></div>
            <div>pm2.5:{{ item.pm25 }}</div>
            <div>{{ item.text_day }}</div>
            <div>{{item.low}}°-{{item.high}}°</div>
            <div>风：{{item.wind_scale}}级</div>
            </div> 
          </div>
        </div>
        </template>
<script lang="ts" setup>
import { ref ,onMounted} from 'vue'
import type { Ref } from "vue";
import {fulAirQuery,fulTempQuery} from "../../service/cityService"

interface IAir{
  aqi:string;
  pm25:string;
  pm10:string;
  so2:string;
  no2:string;
  o3:string;
  date:string;
  quality:string;
}

let airList:Ref<IAir[]>=ref([]);
let tempList: any=ref([]);
let id=ref("");
let name=ref("");
let aa=localStorage.getItem('city');
if(aa?.length){
  id.value=JSON.parse(aa).id;
name.value=JSON.parse(aa).name;
}


let fulairList=async()=>{
  let {data}=await fulAirQuery({'key':'S_kv1Ro8FrmQ4UeD9','location':name.value,'language':'zh-Hans'});
  airList.value=data.results[0].daily;
}
let  fulTempList=async()=>{
  let {data}=await fulTempQuery({'key':'S_kv1Ro8FrmQ4UeD9','location':name.value,'language':'zh-Hans','unit':"c",'start':0,'days':5})
  let list= data.results[0].daily;
  tempList.value=list

}
onMounted(async()=>{
  await fulairList();
  await fulTempList();
  for(var i=0;i<tempList.value?.length;i++){ 
    tempList.value[i].quality=airList.value[i].quality
    tempList.value[i].pm25=airList.value[i].pm25
    }
})

</script>
<style scoped lang="scss">
.five{
  box-sizing: border-box;
   margin-top: 10px;
   background: #fff;
   padding: 10px;
   .yubao .items:first-child{
    background: rgb(238, 238, 238);
    border-radius: 10px;
   }
   h6{
    margin-bottom: 10px;
   }
   .yubao{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    .items{
      flex: 1;
      text-align: center;
      div{
        margin:10px 7px;
      }
    }
   }
}
</style>